<template>
    <div>
      <div class="apply-head">
        <img @click="fan()" :src="'./static/lyl/back.png'" alt="">
        <span>报名</span>
      </div>
      <div class="pro-info">
        <p>参赛节目</p>
        <span><span>*</span>节目名称:</span>
        <input v-model="name" type="text" placeholder="请输入节目名称"><br>
        <span><span>*</span>节目人数:</span>
        <input v-model="number" type="number" placeholder="请输入节目人数"><br>
        <span class="spa"><span>*</span>节目介绍:</span>
        <textarea v-model="introduce" name="" id="" cols="30" rows="10" placeholder="请输对您的节目做一下介绍"></textarea><br>
        <span class="spa"><span>*</span>节目图片:</span>
        <van-uploader :after-read="onRead" multiple>
          <img :src="img?img:require('../../../assets/img/add.png')" alt="">
        </van-uploader>
      </div>
      <div class="pro-info">
        <p>参赛者</p>
        <span class="mr"><span>*</span>姓名:</span>
        <input v-model="user_name" type="text" placeholder="请输入您的姓名"><br>
        <div class="sex">
          <span class="mr"><span>*</span>性别:</span>
          <van-radio-group v-model="sex">
            <van-radio name="1">男</van-radio>
            <van-radio name="2">女</van-radio>
          </van-radio-group>
        </div>
        <span class="mr"><span>*</span>手机:</span>
        <input v-model="mobile" type="number" placeholder="请输入手机号码">
        <button @click="sucess()">提交</button>
      </div>
    </div>
</template>

<script>
  import {Dialog} from 'vant';
  import * as list from "../../../api/list.js";
    export default {
      name: "Apply",
      data(){
        return {
          name:'',
          number:'',
          introduce:'',
          img:'',
          user_name:'',
          sex:'',
          mobile:''
        }
      },
      beforeMount(){
        let par = {active_id:this.$route.params.id}
        list.applyShow(par).then(res=>{
          console.log('报名是否展示',res)
        })
      },
      mounted(){
        mui.back = function() {
          window.history.go(-1);
        }
      },
      methods:{
        fan(){
          history.go(-1);
        },
        sucess(){
          if (this.name.length==0||this.number.length==0||this.introduce.length==0||this.img==0||this.user_name.length==0||this.sex.length==0){
            Dialog.alert({
              message: '请完善报名信息'
            })
          }else if (!/^[1][3-9][0-9]{9}$/.test(this.mobile)) {
            Dialog.alert({
              message: '请输入合法的手机号'
            })
          }else{
            Dialog.confirm({
              title: '温馨提示',
              message: '确认要提交信息'
            }).then(() => {
              let parms = {
                active_id:this.$route.params.id,
                user_id:this.$store.state.user_id,
                name:this.name,
                number:this.number,
                introduce:this.introduce,
                img:this.img,
                user_name:this.user_name,
                sex:this.sex,
                mobile:this.mobile
              };
              console.log(parms);
              list.activeApply(parms).then(res=>{
                console.log(res);
                if (res.status==200){
                  this.$router.push('/applysucess/'+this.$route.params.id+'/'+res.data.program_id);
                }else{
                  Dialog.alert({
                    message: '您的输入有误，请重新输入'
                  })
                }
              })
            }).catch(() => {
              // on cancel
            });
          }
        },
        onRead(file){
          this.img = file.content;
        }
      }
    }
</script>

<style scoped>
 .apply-head{
   padding: 40px;
 }
 .apply-head img{
   width: 22px;
   margin-right: 30px;
 }
 .apply-head span{
   font-size: 36px;
   vertical-align: 15%;
 }
  .pro-info{
    padding: 0 60px;
    margin-bottom: 70px;
  }
 .pro-info p{
   font-size: 32px;
   padding: 10px 0;
   font-weight: bold;
 }
 .pro-info .spa{
   vertical-align: top;
 }
 .pro-info .spa span{
   vertical-align: top;
 }
 .pro-info>span{
   font-size: 28px;
   line-height: 72px;
   margin-right: 10px;
 }
 .pro-info>span span{
   color: #e32c1a;
 }
 .pro-info>input{
   width: 430px;
   height: 46px;
   border: 1px solid #dcdcdc;
   font-size: 24px;
   padding: 10px 20px;
   margin-bottom: 20px;
 }
 .pro-info>textarea{
   width: 430px;
   height: 216px;
   font-size: 24px;
   border: 1px solid #dcdcdc;
   padding: 10px 20px;
   margin-bottom: 20px;
 }
 .pro-info .mr{
   margin-right: 70px;
 }
 .pro-info .sex{
   display: flex;
   margin: 40px 0 20px;
 }
 .van-radio-group{
   display: flex;
 }
 .van-radio{
   margin-right: 20px;
 }

 .pro-info .sex .mr{
   font-size: 28px;
 }
 .pro-info .sex .mr span{
   color: #e32c1a;
 }
 .pro-info img{
   width: 320px;
   height: 170px;
 }
 .pro-info button{
   width: 100%;
   height: 80px;
   font-size: 36px;
   color: #fff;
   background: #884ca4;
   margin-top: 40px;
 }
</style>
